บทที่ 4 การรับส่งค่า ของ AJAX
การส่งค่าไปประมวลผลบนปลายทาง ด้วย AJAX มีอยู่ด้วยกัน 2 วิธี คือ GET หรือ POST โดยกำหนดผ่าน method open มีตัวอย่าง การใช้งาน และความแตกต่างกันดังนี้
การส่งแบบ GET เราจะส่งค่า parameter ต่างๆผ่านทาง URL เช่น 'test3.php?value='+value เป็นต้น เหมือนการที่เราส่งค่า ผ่านทาง Address bar และเราจะกำหนดให้ ค่าที่ส่งไปพร้อมกับ method send เป็น null
ส่วนการส่งค่า แบบ POST คือการส่งค่าไปยังเพจปลายทางโดยตรง (คล้ายกับการส่งผ่าน ฟอร์ม ด้วย method แบบ POST) การส่งโดยวิธีนี้ ข้อความที่ส่งไป จะถูกเข้ารหัสก่อนส่ง ดังนั้นในภาษาอื่นๆ ที่ไม่ใช่ อังกฤษ อาจมีข้อความเป็นภาษาต่างดาวได้ (ดูจากตัวอย่าง และจะมีวิธีการแก้ไขในบทต่อๆไป) วิธีการแบบนี้ เราจะทำการส่งค่า parameter ไปพร้อมกับ method send ดังตัวอย่าง
ในเพจปลายทาง การรับค่า ก็ทำเหมือนกับการรับค่าผ่านฟอร์ม ด้วย method GET หรือ POST เหมือนเดิม
ไฟล์ test3.php ที่ AJAX เรียกไป
การส่งแบบ GET เราจะส่งค่า parameter ต่างๆผ่านทาง URL เช่น 'test3.php?value='+value เป็นต้น เหมือนการที่เราส่งค่า ผ่านทาง Address bar และเราจะกำหนดให้ ค่าที่ส่งไปพร้อมกับ method send เป็น null
function sendget(value) {
var req = Inint_AJAX(); //สร้าง Object
req.open('GET', 'test3.php?value='+value, true); //กำหนด สถานะการทำงานของ AJAX แบบ GET และส่งข้อมูลผ่านทาง URL
req.onreadystatechange = function() { //เหตุการณ์เมื่อมีการตอบกลับ
if (req.readyState==4) {
if (req.status==200) { //ได้รับการตอบกลับเรียบร้อย
var data=req.responseText; //ข้อความที่ได้มาจากการทำงานของ test3.php
document.getElementById("content").innerHTML="ข้อความที่ตอบกลับจาก server โดยการส่งแบบ GET คือ "+data; //แสดงผล
}
}
};
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //Header ที่ส่งไป
req.send(null); //ทำการส่ง
};
ส่วนการส่งค่า แบบ POST คือการส่งค่าไปยังเพจปลายทางโดยตรง (คล้ายกับการส่งผ่าน ฟอร์ม ด้วย method แบบ POST) การส่งโดยวิธีนี้ ข้อความที่ส่งไป จะถูกเข้ารหัสก่อนส่ง ดังนั้นในภาษาอื่นๆ ที่ไม่ใช่ อังกฤษ อาจมีข้อความเป็นภาษาต่างดาวได้ (ดูจากตัวอย่าง และจะมีวิธีการแก้ไขในบทต่อๆไป) วิธีการแบบนี้ เราจะทำการส่งค่า parameter ไปพร้อมกับ method send ดังตัวอย่าง
function sendpost(value) {
var req = Inint_AJAX(); //สร้าง Object
req.open('POST', 'test3.php', true); //กำหนด สถานะการทำงานของ AJAX แบบ POST
req.onreadystatechange = function() { //เหตุการณ์เมื่อมีการตอบกลับ
if (req.readyState==4) {
if (req.status==200) { //ได้รับการตอบกลับเรียบร้อย
var data=req.responseText; //ข้อความที่ได้มาจากการทำงานของ test3.php
document.getElementById("content").innerHTML="ข้อความที่ตอบกลับจาก server โดยการส่งแบบ POST คือ "+data; //แสดงผล
}
}
};
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //Header ที่ส่งไป
req.send("value="+encodeURIComponent(value)); //ทำการส่งข้อมูลผ่านคำสั่ง SEND
};
ในเพจปลายทาง การรับค่า ก็ทำเหมือนกับการรับค่าผ่านฟอร์ม ด้วย method GET หรือ POST เหมือนเดิม
ไฟล์ test3.php ที่ AJAX เรียกไป
<?
$value=(isset($_POST["value])) ? $_POST["value] : $_GET["value];
echo $value;
?>
ตัวอย่าง